<template>
	<div class="mainContent">
		<pathTracking :path='Model.path' />
		<div class="container">
			<!-- <card :configArr="Model.configArr"></card> -->
			<div class="searchbox">
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">查询条件</div>
				</div>
				<!-- 搜索框 -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear" @onExport="toExport"></advancedSearch>
			</div>
			<div class="normal-btn-group btn-group">
				<div class="normal-btn query-btn" @click="newPage">新建退货单</div>
			</div>
			<!-- 表格 -->
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">质检退货列表</div>
						<div class="common-btn-group">

						</div>
					</div>
				</el-row>
				<el-table :data="Model.tableData" border :row-style="selectedHighlight"  @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" fixed></el-table-column>
					<template v-for="item in Model.tableHeaderData">
						<el-table-column 
							:key="item.prop"
							:prop="item.prop" 
							:label="item.label">
								<template slot-scope="scope">
									<template v-if="item.prop=='number'">
										<el-button type="text" @click="toDetial(scope.row)"><a class="detial-link">{{scope.row.number}}</a></el-button>
									</template>
									<template v-else>
										{{scope.row[item.prop]}}
									</template>
								</template>
						</el-table-column>
					</template>
				</el-table>
				<!--  -->
				<el-row class="pagination-cont">
			        <el-pagination
			          @size-change="handleSizeChange"
			          background
			          @current-change="handleCurrentChange"
			          :current-page="Model.paginationObject.currentPage"
			          :page-sizes="[10, 20, 30, 40]"
			          :page-size="Model.paginationObject.pageSize"
					  :pager-count="5"
			          layout="sizes, prev, pager, next, jumper, slot"
			          :total="Model.paginationObject.total">
			          <div class="pagination-slot">
			            显示
			            <p class="slot-i">{{Model.paginationObject.num1}}</p>
			            到
			            <p class="slot-i">{{Model.paginationObject.num2}}</p>
			            ，共
			            <p class="slot-i">{{Model.paginationObject.total}}</p>
			            记录
			          </div>
			        </el-pagination>
			      </el-row>
			</div>
			
			
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "listAllocation",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			card,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
